<template>
  <div ref="chartRef" class="chart"></div>
</template>

<script>
export default {
  name: 'EchartsChart',
}
</script>

<script setup>
import echarts from '@/plugins/echarts'
import {ref, reactive, onMounted, watch} from 'vue'
import merge from 'lodash/merge'
// 声明接收特定的配置
const props = defineProps(['option'])
const chartRef = ref()
let chart
// 通用基础的配置
const baseOption = {
    xAxis: {
      
      axisTick: {
        show: false
      },
      axisLine: {
        color: 'rgba(255, 255, 255, .6)'
      },
      axisLabel: {
        fontSize: 7,
        color: 'rgba(255, 255, 255, .3)'
      }
    },
    yAxis: {
      axisLine: {
        show: true,
        color: 'rgba(255, 255, 255, .6)'
      },
      axisLabel: {
        fontSize: 7,
        color: 'rgba(255, 255, 255, .3)'
      },
      splitLine: {
        show: false,
      }
    },
    
    grid: {
      left: 10,
      top: 40,
      right: 10,
      bottom: 10,
      containLabel: true
    },

    title: {
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, .3)',
      borderWidth: 0,
      textStyle: {
        color: '#fff'
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      right: 5,
      top: 10,
      itemWidth: 10,
      textStyle: {
        color: '#fff',
        fontSize: 8
      }
    }
  }

// 渲染图表的函数
const renderChart = () => {
  if (!chart) {
    chart = echarts.init(chartRef.value)
  }

  // 将基础配置与传入的特定配置进行深度合并
  const option = merge(baseOption, props.option)
  // 设置合并后配置
  chart.setOption(option)
}

// 初始化渲染图表
onMounted(renderChart)

// 监视到传入的配置(里面的data变化)就重新渲染图表
watch(props.option, renderChart, {deep: true})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
